<template>
    <a-config-provider :locale="locale">
      <div id="app">
        <a-spin v-if="APPSpinningData.spinning" style="width: 100%;height: 100vh;position: fixed;top: 0;left: 0;z-index: 99999999;" :tip="APPSpinningData.tipName" :spinning="APPSpinningData.spinning"></a-spin>
          <router-view/>
      </div>
    </a-config-provider>
</template>
<script>

  import zh_CN from 'ant-design-vue/lib/locale-provider/zh_CN'
  import en_US from 'ant-design-vue/lib/locale-provider/en_US'
  import enquireScreen from '@/utils/device'

  export default {
    data() {
      return {
        locale: this.initLocale(),
        // spinning:true,
      }
    },
    watch: {
      '$store.getters.language': {
        handler() {
          this.locale = this.initLocale()
        }
      }
    },
    created() {
      let that = this
      enquireScreen(deviceType => {
        if (deviceType === 1) {
          that.$store.commit('TOGGLE_DEVICE', 'mobile')
          that.$store.dispatch('setSidebar', false)
        } else {
          that.$store.commit('TOGGLE_DEVICE', 'desktop')
          that.$store.dispatch('setSidebar', true)
        }
      })
    },
    computed: {
      APPSpinningData(){
        //console.log('this.$store.state.permission.APPSpinningData',this.$store.state.permission.APPSpinningData)
            return this.$store.state.permission.APPSpinningData
        },
    },
    methods: {
      initLocale() {
        if (this.$store.getters.language === 'en_US') {
          return en_US
        }
        return zh_CN
      }
    }
  }
</script>
<style lang="less">
  #app {
    height: 100%;
  }

  body {
    overflow-y: hidden;
    font-family: -apple-system, BlinkMacSystemFont,
    'Microsoft YaHei', 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Helvetica Neue', Helvetica, Arial,
    sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol' !important;
  }
  /* .ant-form-inline .ant-form-item>.ant-form-item-control-wrapper, .ant-form-inline .ant-form-item>.ant-form-item-label{
    vertical-align: middle !important;
  } */
  /* 折叠面板样式 */
  // .ant-collapse-header{
  //   background-color: #fff !important;
  //     width: 170px !important;
  // }

  .ant-collapse{
      border: 0px !important;
      background-color: #f4f7fc !important;
  }
  //手风琴头部颜色
  .ant-collapse > .ant-collapse-item{
      // border-top: 3px solid #5ca3e5 !important;
      border: 1px solid #c2d3ff !important;
      margin-bottom: 8px !important;
      // border-bottom: 15px solid #f4f7fc !important;
      // background-color: #c2d3ff;
      background-image: linear-gradient(to bottom,#72c5f3,#d2e6f0,#72c5f3,#72c5f3,#72c5f3,#72c5f3,#72c5f3,#72c5f3,#72c5f3);
      background-image: linear-gradient(to bottom,#e7f3ff,#fff,#e7f3ff,#e7f3ff,#e7f3ff,#e7f3ff,#e7f3ff,#e7f3ff,#e7f3ff);
      
      // background-image: linear-gradient(to bottom,#1d9fe6,#d2e6f0,#1d9fe6,#1d9fe6,#1d9fe6,#1d9fe6,#1d9fe6,#1d9fe6,#1d9fe6);
      background-size: 100% 46px !important;
  }
  .ant-collapse-header{
    cursor: default !important;
    color: #ffffff !important;
    color: #38f !important;
    font-weight: 600;
    font-size: 16px !important;
    text-shadow: 2px 2px 1px rgba(0, 0, 0, 0.5);
    text-shadow: 0px 0px 0px rgba(0, 0, 0, 0.5);
  }
  .ant-collapse > .ant-collapse-content{
    border-top: 1px solid #c2d3ff !important;
  }
  .flow-path-model-box{
      .ant-modal-body{
          background: #f4f7fc !important;
      }
  }
  .collapse-original{
    border: 1px solid #d9d9d9 !important;
    .ant-collapse-item ,.ant-collapse-item-active{
      background: #fafafa !important;
    }
    .ant-collapse-header{
      padding: 8px 24px;
      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5) !important;
      font-weight: 600;
      background: #fafafa !important;
    }
  }
  .collapse-original > .ant-collapse-item{
      border: none !important;
    }
    .full-modal {
      .ant-modal {
        max-width: 100%;
        top: 0;
        padding-bottom: 0;
        margin: 0;
      }
      .ant-modal-content {
        width: 100%;
        display: flex;
        flex-direction: column;
      }
      .ant-modal-body {
        flex: 1;
        height: calc(100vh - 50px) !important;
      }
  }
  .scheme-modal {
    .ant-modal-header{
      display: none !important;
    }
    .ant-modal-footer{
        display: none !important;
    }
  }

  .matter-handle-tabs{
    background: #fff;
    font-size: 16px !important;
    font-weight: 600;
    position: fixed !important;
    top: 45px;
    width: 100%;
    left: 0;
    z-index: 999;
    .ant-tabs-tab-active,.ant-tabs-tab{
        font-size: 16px !important;
        font-weight: 600 !important;
    }
  }

  .a-collapse{
    background: #fff !important;
    width: 100% !important;
    position: relative;
  }
  .ant-collapse-extra{
      z-index: 99;
      position: absolute;
      top: 13px;
      right: -460%;
    }
  .ant-collapse-content{
      width: 100% !important;
    }
  .ant-collapse-header{
    width: 180px !important;
  }
  .collapse-panel-head-l{
    .ant-collapse-header{
      width: 330px !important;
    }
  }
  .collapse-panel-head-l255{
    .ant-collapse-header{
      width: 255px !important;
    }
  }
  .collapse-panel-head-l380{
    .ant-collapse-header{
      width: 380px !important;
    }
  }
  .red-btn{
    color: white !important;
    border: 1px solid #ed5565 !important;
    background-color: #ed5565 !important;
  }
  .orange-btn{
    color: white !important;
    border: 1px solid #faad14 !important;
    background-color: #faad14 !important;
  }
  .fe8939-btn{
    color: white !important;
    border: 1px solid #fe8939 !important;
    background-color: #fe8939 !important;
  }
  .green-btn{
    color: white !important;
    border: 1px solid #1ab394 !important;
    background-color: #1ab394 !important;
  }
  .green-l2-btn{
    color: white !important;
    border: 1px solid #1ab348 !important;
    background-color: #1ab348 !important;
  }
  .green-l-btn{
    color: white !important;
    border: 1px solid #66c24f !important;
    background-color: #66c24f !important;
  }
  .blue-btn{
    border: 1px solid #5ca3e5 !important;
    background-color: #5ca3e5 !important;
    color: #fff !important;
  }
  .ant-btn{
    padding: 0 8px !important;
    height: 30px !important;
  }
  .textarea-noBorder-v,.textarea-noBorder-v:focus,.textarea-noBorder-v:hover{
    border: none !important;
    box-shadow:none !important;
  }
.modal-cancel-btn-n{
  .ant-modal-footer{
    .ant-btn-link{
      display: none !important;
    }
  }
}
.fsxmcQ-c-t{
  color: #ff9800;
}
.fsxmcQ-l-t{
  color: #8BC34A;
}
.fsxmcQ-sl-t{
  color: #1ab348;
}
.fsxmcQ-h-t{
  color: #ffeb3b;
}
.fsxmcQ-red-t{
  color: #f81d22;
}
.fsxmcQ-c-t-bg{
  background: #ff9800;
  color: #fff;
  padding: 3px;
  border-radius: 3px;
}
.fsxmcQ-l-t-bg{
  background: #8BC34A;
  color: #fff;
  padding: 3px;
  border-radius: 3px;
}
.fsxmcQ-h-t-bg{
  background: #ffeb3b;
  color: #fff;
  padding: 3px;
  border-radius: 3px;
}
.fsxmcQ-red-t-bg{
  background: #f81d22;
  color: #fff;
  padding: 3px;
  border-radius: 3px;
}
.top-handle-v{
  width: calc(100% - 0);
  background-color: #fff;
  // position: fixed;
  top: 57px;
  z-index: 99;
  left: 8px;
  padding: 5px 8px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  border: 1px solid #d9d9d9;
  font-size: 22px;
}
.ant-spin-nested-loading{
  height: 50%;
}

//任务受理标签页
.process-handling-card{
  // margin: 10px 10px 0 10px;
        .ant-tabs-bar{
            // border: 0 !important;
            border-color: #38f !important;
            margin: 0 !important;
        }
        .ant-tabs-tab{
            background: #edeff3 !important;
            font-size: 14px !important;
            // margin-left: 1px !important;
            height: 30px !important;
            line-height: 30px !important;

        }
        .ant-tabs-tab-active{
            background-color: #38f !important;
            color: #fff !important;
            height: 32px !important;
            border: 1px solid #38f !important;
            border-bottom: 0 !important;
            padding:0 15px !important;

        }
        .ant-tabs-nav-container{
            height: 32px !important;
        }
    // .ant-tabs{
    //   overflow: initial !important;
    // }
    // .ant-tabs-content {
    //     // height: 120px;
    //     margin-top: -16px !important;
    // }
    // .ant-tabs-content > .ant-tabs-tabpane {
    //     // box-shadow: 0px 0px 5px 1px #5ca3e5 !important;
    //     // border:1px solid #2F54EB !important;

    //     // padding: 16px !important;
    //     margin: 0 5px !important;
    // }
    // .ant-tabs-bar {
    //   margin: 0 !important;
    //   border-color: transparent !important;
    // }
    // .ant-tabs-bar .ant-tabs-tab {
    //     color: #c9c9c9 !important;
    //     border-color: transparent !important;
    //     background: transparent !important;
    // }
    // .ant-tabs-bar .ant-tabs-tab-active {
    //     border-color: #fff !important;
    //     background: #fff !important;
    //     // border-color: #2F54EB !important;
    //     color: #2F54EB !important;
    //     // box-shadow: 0px 0px 5px 1px #5ca3e5 !important;
    //     box-shadow: 0px 0px 12px -3px #69a3d9 !important;
    //     border-radius: 10px 10px 0 0 !important;
    // }
    // .ant-tabs-nav-animated{
    //     padding: 5px 5px 0 5px !important;
    // }
    // .ant-tabs .ant-tabs-top-content{
    //     width: calc(100% - 10px) !important;
    //     padding-bottom: 5px;
    //     // background: #fff !important;
    // }
    // .ant-tabs-nav-container{
    //     height: 50px !important;
    // }

}
//任务受理左边定位
.event-positioning-box{
  border: 1px solid #c2d3ff;
}
.search-form {
  .ant-form-inline .ant-form-item{
    margin-right: 40px;
  }
  .ant-form-item:last-of-type{
    margin-right: 0 !important;
  }
}
.ant-btn-background-ghost{
    color: #5ca3e5 !important;
    border:1px solid #5ca3e5 !important;
}
.ant-btn-orange-ghost{
    color: #faad14 !important;
    border:1px solid #faad14 !important;
}
.ant-btn-green-l-ghost{
    color: #66c24f !important;
    border:1px solid #66c24f !important;
  }
.ant-btn-danger{
  border: 1px solid #ed5565 !important;
  color: #ed5565 !important;
}
.ant-modal-header{
  text-align: center !important;
  background-color: #38f !important;
  padding: 10px 24px !important;
  .ant-modal-title{
    font-size: 18px !important;
    color: #fff !important;
    font-family: KaiTi !important;
  }
}
.ant-modal-close-x{
  font-weight: 600 !important;
  color: #fff !important;
  line-height: 56px !important;
  font-size: 18px !important;
}
.ant-modal-header{
  border: 8px solid #f0f2f5 !important;
  border-bottom: 0 !important;

  .ant-modal-title{
    font-size: 26px !important;
  }
}
.ant-modal-body{
  border: 8px solid #f0f2f5 !important;
}
.ant-modal-footer{
  border: 8px solid #f0f2f5 !important;
  border-top: 0 !important;
}
.dealwith-application-modelHeight{
  height: calc(100vh - 175px) !important;
}
.vxe-modal--wrapper .vxe-modal--header {
  text-align: center!important;
  background-color: #38f!important;
  border-radius: 0;
  border: 8px solid #f0f2f5 !important;
  .vxe-modal--header-title {
    font-size: 18px!important;
    color: #fff!important;
    font-family: KaiTi!important;
  }
  .vxe-modal--header-right {
    color: #fff!important;
    font-size: 18px!important;
  }
}
.vxe-modal--body {
  border: 8px solid #f0f2f5 !important;
  border-top: none !important;
  border-bottom: none !important;
}
.vxe-modal--footer {
  border: 8px solid #f0f2f5 !important;
}
.reviewVerificationManage-allHandlingPage-modal-v{
  // height: calc(100vh - 60px);
  // overflow: auto;
}
.dealwith-application-borderisFalse{
  border: none !important;
}
iframe {
  transform: scale(1) !important;
  transform-origin: top left !important;
}
#domDiv{
  width: 789px !important;
}
.form-descriptions-content-box{
        // padding: 0 15px;
        
        // margin-top: 20px;
        margin-bottom: 8px !important;
        p {
            margin-block: 0px !important;
        }
        .ant-descriptions-bordered .ant-descriptions-item-label{
            font-weight: 600;
            color: rgba(0, 0, 0, 0.85);
            background-color:#e6f7ff;
            width: 150px !important;
            text-align: center;
            font-size: 16px;
            font-family:simHei !important;
        }
        .ant-descriptions-bordered .ant-descriptions-item-label, .ant-descriptions-bordered .ant-descriptions-item-content{
            padding: 5px 10px !important;
            .ant-form-item {
                margin-bottom: 0 !important;
            }

        }
        .descriptions-row .descriptions-label-slot{
            display: flex;
            align-items: center;
            width: 120px !important;//确保左侧固定文字不会换行
            justify-content: center;
            text-align: center;
        }
        .xhText{
            color: #f5222d;
            line-height: 31px;
            font-size: 14px;
            font-weight: 600;
            height: 30px;
        }
        .descriptions-item-center{

        }
        .ant-form-inline .ant-form-item-with-help{
            margin-bottom: 0px !important;
        }
        .zm-form-model{
            display: flex;
            .ant-form-item-control-wrapper{
                flex: 1;
            }
        }
        .ant-descriptions-bordered .ant-descriptions-row{
            border-bottom: 1px solid #e4e3e3;
        }
        .ant-descriptions-bordered .ant-descriptions-item-label, .ant-descriptions-bordered .ant-descriptions-item-content{
            border-right: 1px solid #e4e3e3;
            min-width: 100px;
        }
        .ant-descriptions-bordered .ant-descriptions-view{
            border: 1px solid #e4e3e3;
            // border-right: 0;
        }
        .ant-descriptions-row:last-child{
            border-bottom: 0;
        }

    }
</style>
